<!DOCTYPE html>
<html class="x-admin-sm" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="/static/backstage/css/font.css">
    <link rel="stylesheet" href="/static/backstage/css/xadmin.css">
    <script type="text/javascript" src="/static/backstage/lib/layui/layui.js"></script>
    <script type="text/javascript" src="/static/backstage/js/xadmin.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">



        <form class="layui-form" th:action="@{/car}" method="post">


            <input type="hidden" name="_method" value="put"/>
            <!--主键唯一标识-->
            <input type="hidden" name="carId" th:value="${car.carId}">
            <!--型号ID，外键型号表-->
            <input type="hidden" name="carModelid" th:value="${car.carModelid}">

            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>型号
                </label>
                <div class="layui-input-inline">
                    <input disabled="true" type="text" id="modelName" name="modelName"  required="" lay-verify="required"
                           autocomplete="off" class="layui-input" th:each="carModel: ${carModelList}"
                            th:value="${carModel.modelName}" th:if="${car.carModelid == carModel.modelId}">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="carVendor" class="layui-form-label">
                    <span class="x-red">*</span>厂商
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="carVendor" name="carVendor" required="" lay-verify="required"
                           autocomplete="off" class="layui-input" th:value="${car.carVendor}">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="carEnergyType" class="layui-form-label">
                    <span class="x-red">*</span>能源类型
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="carEnergyType" name="carEnergyType" required="" lay-verify="required"
                           autocomplete="off" class="layui-input" th:value="${car.carEnergyType}" >
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>【汽油、电动等】
                </div>
            </div>
            <div class="layui-form-item">
                <label for="carEmissionStandard" class="layui-form-label">
                    <span class="x-red">*</span>排放标准
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="carEmissionStandard" name="carEmissionStandard" required="" lay-verify="required"
                           autocomplete="off" class="layui-input" th:value="${car.carEmissionStandard}" >
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>【例：国VI】
                </div>
            </div>
            <div class="layui-form-item">
                <label for="carMarketTime" class="layui-form-label">
                    <span class="x-red">*</span>上市时间
                </label>
                <div class="layui-input-inline">
                    <input type="date" id="carMarketTime" name="carMarketTime" required="" lay-verify="required"
                           autocomplete="off" class="layui-input" th:value="${car.carMarketTime}" >
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>精确到年月即可
                </div>
            </div>
            <div class="layui-form-item">
                <label for="carMaxPower" class="layui-form-label">
                    <span class="x-red">*</span>最大功率
                </label>
                <div class="layui-input-inline">
                    <input type="number" id="carMaxPower" name="carMaxPower" required="" lay-verify="required"
                           autocomplete="off" class="layui-input" th:value="${car.carMaxPower}">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>KW
                </div>
            </div>
            <div class="layui-form-item">
                <label for="carMaxTorque" class="layui-form-label">
                    <span class="x-red">*</span>最大扭矩
                </label>
                <div class="layui-input-inline">
                    <input type="number" id="carMaxTorque" name="carMaxTorque" required="" lay-verify="required"
                           autocomplete="off" class="layui-input" th:value="${car.carMaxTorque}">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>N·m
                </div>
            </div>
            <div class="layui-form-item">
                <label for="carMaxSpeed" class="layui-form-label">
                    <span class="x-red">*</span>最高车速
                </label>
                <div class="layui-input-inline">
                    <input type="number" id="carMaxSpeed" name="carMaxSpeed" required="" lay-verify="required"
                           autocomplete="off" class="layui-input" th:value="${car.carMaxSpeed}">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>KM/h
                </div>
            </div>
            <div class="layui-form-item">
                <label for="carFuelConsumption" class="layui-form-label">
                    <span class="x-red">*</span>油耗
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="carFuelConsumption" name="carFuelConsumption" required="" lay-verify="required"
                           autocomplete="off" class="layui-input" th:value="${car.carFuelConsumption}">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>L/100KM
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <button type="submit" class="layui-btn" lay-filter="add">
                    修改
                </button>
            </div>
        </form>
    </div>
</div>
<script src="/static/assets/js/jquery.min.js" th:src="@{/static/assets/js/jquery.min.js}"></script>
<script>
    //  类型ID
    var cId;
    //  品牌ID
    var bId;

    layui.use(['form', 'layer'],
        function () {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;

            //自定义验证规则
            form.verify({
                nikename: function (value) {
                    if (value.length < 5) {
                        return '昵称至少得5个字符啊';
                    }
                },
                pass: [/(.+){6,12}$/, '密码必须6到12位'],
                repass: function (value) {
                    if ($('#L_pass').val() != $('#L_repass').val()) {
                        return '两次密码不一致';
                    }
                }
            });

            //监听提交
            form.on('submit(add)',
                function (data) {
                    console.log(data);
                    //发异步，把数据提交给php
                    layer.alert("增加成功", {
                            icon: 6
                        },
                        function () {
                            //关闭当前frame
                            xadmin.close();

                            // 可以对父窗口进行刷新
                            xadmin.father_reload();
                        });
                    return false;
                });

            form.on('select(quiz3)', function (data) {

                cId = data.value;// 一级列表的id
                console.log("cId：" + cId);

                $.ajax({
                    type: "POST",
                    url:"/seriess",
                    contentType: "application/json",
                    data:JSON.stringify({brandId:bId, carTypeId:cId}),
                    success:function (result) {
                        $("#seriesSelect").empty();
                        $("#seriesSelect").append("<option>---请选择车系---</option>");
                        for(var i = 0; i< result.detail.length;i++){
                            $("#seriesSelect").append("<option value='" + result.detail[i].seriesId + "'>" + result.detail[i].seriesName + "</option>");
                        }
                        form.render('select');//  注意：数据赋值完成之后必须调用该方法，进行layui的渲染，否则数据出不来
                    }
                });
            });

            form.on('select(quiz1)', function (data) {

                bId = data.value;// 一级列表的id
                console.log("bId：" + bId);

                $.ajax({
                    type: "POST",
                    url:"/seriess",
                    contentType: "application/json",
                    data:JSON.stringify({brandId:bId, carTypeId:cId}),

                    // data:{"brandId":pId,"carTypeId":cId},

                    success:function (result) {
                        $("#seriesSelect").empty();
                        $("#seriesSelect").append("<option>---请选择车系---</option>");

                        // console.log(result.detail);
                        for(var i = 0; i< result.detail.length;i++){
                            $("#seriesSelect").append("<option value='" + result.detail[i].seriesId + "'>" + result.detail[i].seriesName + "</option>");

                            console.log("ID：" + result.detail[i].seriesId + "Name：" + result.detail[i].seriesName);
                        }
                        form.render('select');//  注意：数据赋值完成之后必须调用该方法，进行layui的渲染，否则数据出不来
                    }
                });

            });

        });
</script>
<script>var _hmt = _hmt || [];
(function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();</script>
</body>

</html>
